import React, { Component } from 'react'
import PropTypes from 'prop-types'

class TodoItem extends Component {
  constructor (props) {
    super(props)

    this.deleteClick = this.deleteClick.bind(this)
  }

  shouldComponentUpdate (nextProps, nextState) {
    if (this.props.item !== nextProps.item) {
      return true
    }

    return false
  }

  // 第一个条件: 组件内部使用了this.props 
  // 第二个条件: 
  //  当数据发生变化时
  //  如果这个组件是第一次出现, 则不会执行
  //  如果这个组件之前已经存在了, 则会执行
  componentWillReceiveProps () {
    console.log('child componentWillReceiveProps')
  }

  // 当组件即将被页面剔除的时候, 自动执行
  componentWillUnmount () {
    console.log('child componentWillUnmount')
  }

  render () {
    console.log('child render')
    const { item, test } = this.props
    return (
      <li 
        onClick={this.deleteClick}
        dangerouslySetInnerHTML={{__html: `${test} - ${item}`}}>
      </li>
    )
  }

  deleteClick () {
    const { deleteClick, index } = this.props
    deleteClick(index)
  }
}

TodoItem.propTypes = {
  item: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  index: PropTypes.number,
  deleteClick: PropTypes.func,
  test: PropTypes.string.isRequired
}

TodoItem.defaultProps = {
  test: 'hello world'
}

export default TodoItem
